<!--
 * @Date         : 2023-11-06 21:37:46
 * @LastEditTime : 2023-11-21 22:42:34
 * @description  : searchPage
-->
<template>
  <view class="searchPage">
    <scroll-view class="scrollview" :scroll-y="true" @scroll="onscroll">
      <video
        :src="payVideo.file_url"
        @timeupdate="timeupdate"
        controls
        class="videoStyle"
      ></video>
      <div class="onlineDetail">
        <div class="main-content">
          <div class="name">
            {{ payVideo.title }}
          </div>
        </div>
      </div>
      <div class="onlineDetail">
        <div class="main-content">
          <div class="name">
            {{ detail.name }}
            <text class="name-tag">共{{ detail.chapter_num }}课时</text>
          </div>
          <div class="tag">
            <text class="tag-n">{{ detail.course_cate }}</text>
            <text class="zcr">主讲人：{{ detail.teacher }}</text>
            <text class="hz">金牌教师</text>
          </div>
          <div class="content">
            <u-read-more ref="uReadMore" showHeight="200">
              <!-- <rich-text :nodes="content"></rich-text> -->
              <div class="desc">{{ detail.content }}</div>
            </u-read-more>
          </div>
        </div>
      </div>
    </scroll-view>
  </view>
</template>

<script>
import { get_course_details } from "@/apis/modules/user";
import hbComment from "@/components/hb-comment_1.2.2/components/hb-comment/hb-comment.vue";
import { course_chapters, subStudyResult } from "apis/modules/user";
export default {
  name: "onlineDetail",
  components: { hbComment },
  data() {
    return {
      payVideo: "",
      chapterList: [],
      commentData: "",
      scrollTop: 0,
      searchValue: "",
      detail: "",
      study_duration: 0,
      total_duration: 0,
    };
  },
  onLaunch() {},
  onShow() {
    console.log();
  },
  onLoad() {
    this.getDourseDetails();
  },
  onUnload() {
    this.subStudyResult();
  },
  methods: {
    timeupdate(e) {
      console.log(e);
      this.study_duration = Math.ceil(e.detail.currentTime);
      this.total_duration = Math.ceil(e.detail.duration);
    },
    subStudyResult() {
      console.log("离开");
      if (this.study_duration > 0) {
        let course_id = this.detail.id;
        let chapter_id = this.payVideo.id;
        let study_duration = Math.ceil(this.study_duration);
        let total_duration = Math.ceil(this.total_duration);
        let data = { course_id, chapter_id, study_duration, total_duration };
        subStudyResult(data).then((res) => {});
      }
    },
    onscroll(data) {
      this.scrollTop = data.detail.scrollTop;
    },
    add(data) {
      console.log(data, "add");
    },
    del(data) {
      console.log(data, "del");
    },
    like(data) {
      console.log(data, "like");
    },
    focusOn(data) {
      console.log(data, "focusOn");
    },
    onWork() {
      this.$Router.push({
        path: "/pages/work/work?course_id=11",
      });
    },
    getDourseDetails() {
      let { course_id, video } = this.$Route.query;
      course_chapters({ course_id }).then((res) => {
        this.chapterList = res;
        this.payVideo = res.filter((item) => item.id == video)[0];
      });
      get_course_details({ course_id }).then((res) => {
        this.detail = res;
        this.$refs.uReadMore.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchPage {
  height: 100vh;
  background: #eeeeee;
  .scrollview {
    height: 100%;
    overflow: hidden;
  }
  .onlineDetail {
    background: #eeeeee;
    padding: 30rpx;
    .main-content {
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      .name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        .name-tag {
          margin-left: 20rpx;
          font-size: 18rpx;
          font-weight: 400;
          color: #999999;
        }
      }
      .tag {
        font-size: 18rpx;
        font-weight: bold;
        color: #999999;
        text-align: left;
        margin: 20rpx 0;
        .tag-n {
          padding: 4rpx 20rpx;
          height: 31rpx;
          background: #eeeeee;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          opacity: 1;
        }
        .zcr {
          font-size: 20rpx;
          font-weight: bold;
          color: #999999;
          margin: 20rpx;
        }
        .hz {
          height: 27rpx;
          padding: 4rpx 20rpx;
          background: #ee4d02;
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          width: 62rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 27rpx;
        }
      }
      .content {
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #666666;
        .desc {
          font-size: 24rpx;
          font-weight: bold;
          color: rgba(102, 102, 102, 0.77);
          line-height: 50rpx;
        }
      }
      .label {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-top: 40rpx;
      }
      .row {
        margin-top: 20rpx;
        min-height: 88rpx;
        overflow: auto;
      }
      .row-item {
        flex-shrink: 0;
        margin-right: 20rpx;
      }
    }
  }
}
.chapterList {
  width: 181rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 1rpx solid #e04411;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  .title {
    width: 100%;
    height: 32rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #e04411;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .duration {
    height: 24rpx;
    font-size: 18rpx;
    font-weight: bold;
    color: #999999;
  }
}
.displayFlex {
  display: flex;
}
.videoStyle {
  width: 100%;
  height: 400rpx;
}
</style>
